import * as React from 'react';
import { useLocation } from 'umi';
import { Layout, Spin } from 'antd';

import { useLayoutLoading, usePageLoading } from '@/hooks/index';

import CustomMenu from './components/menu/index';
import CustomHeader from './components/header/index';
import CustomBreadcrumb from './components/breadcrumb/index';
import styles from './index.less';

import 'moment/locale/zh-cn';

const { Content, Footer, Sider } = Layout;

export default props => {
  const { pageLoading } = usePageLoading();
  const { layoutLoading } = useLayoutLoading();
  const [leftSiderCollapsed, setLeftSiderCollapsed] = React.useState(false);
  const [accountInfo, setAccountInfo] = React.useState(null);

  const location = useLocation();

  React.useEffect(() => {
    const ACCOUNTINFO = window.sessionStorage.getItem('ACCOUNTINFO') || '{}';
    if (ACCOUNTINFO) {
      setAccountInfo(JSON.parse(ACCOUNTINFO));
    }
  }, [location.pathname]);

  if (location.pathname === '/login') {
    return <div>{props.children}</div>;
  }
  return (
    <Spin spinning={layoutLoading}>
      <Layout className={styles.layout}>
        <Sider
          className={styles.sider}
          breakpoint="xl"
          collapsible
          collapsed={leftSiderCollapsed}
          onCollapse={() => setLeftSiderCollapsed(t => !t)}
        >
          <CustomMenu />
        </Sider>
        <Layout className={styles.contentLayout}>
          <CustomHeader accountInfo={accountInfo} />
          <CustomBreadcrumb />
          <Content className={styles.content}>
            <Spin size="large" spinning={pageLoading}>
              {props.children}
            </Spin>
          </Content>
          <Footer style={{ textAlign: 'center' }}>CopyRight © 2019-2020</Footer>
        </Layout>
      </Layout>
    </Spin>
  );
};
